<template>
    <div class="flow-setting flex flex-col">
        <a-card class="mb-5">
            <div class="flex justify-between">
                <a-input placeholder="请输入审批名称搜索" style="width: 200px;">
                    <template #prefix>
                        <SearchOutlined />
                    </template>
                </a-input>
                <div class="add-group">
                    <a-button class="mr-2" @click="handleOpen('add')">
                        <BlockOutlined />
                        新建分组
                    </a-button>
                    <a-button type="primary" @click="goTocreateFlowPage">
                        <PlusOutlined />
                        创建流程
                    </a-button>
                    <a-button @click="()=>deleteTestData()">
                        删除数据
                    </a-button>
                </div>
            </div>
        </a-card>
        <a-card class="flex-1 card-group">
            <a-collapse v-model:activeKey="state.activeTab" v-if="state.tableData.length > 0">
                <a-collapse-panel 
                    v-for="(group,index) in state.tableData"
                    :key="index" 
                    :header="group.name"
                >
                    <common-table
                        :columns="columns"
                        :data="group.formList"
                        :loading="false"
                    >
                        <template #bodyCell="{ column, text, record }">
                            <template v-if="column.key ==='status'">
                                <a-switch 
                                    checked-children="启用" 
                                    un-checked-children="禁用" 
                                    v-model:checked="record.status" 
                                    :checkedValue="StatusEnum.ENABLE" 
                                    :unCheckedValue="StatusEnum.DISABLE"
                                />
                            </template>
                            <template v-else-if="column.key === 'memo'">
                                <template v-if="record.memo">
                                    {{record.memo}}
                                </template>
                                <template v-else>
                                    <a-tag color="blue">空空如也~</a-tag>
                                </template>
                            </template>
                            <template v-else-if="column.key == 'opt'">
                                <div>
                                    <a-button class="mr-2">
                                        <EditOutlined @click="handleEditFormFlow(record.id)" />
                                    </a-button>
                                    <a-button>
                                        <DeleteOutlined @click="deleteFormFlow(record.id)"/>
                                    </a-button>
                                </div>
                            </template>
                        </template>
                    </common-table>
                    <template #extra>
                        <div class="group-status flex items-center">
                            <a-tag color="green" v-if="group.status == 1">开启</a-tag>
                            <a-tag color="red" v-else>禁用</a-tag>
                            <a-dropdown-button>
                                <setting-outlined />
                                <template #overlay>
                                    <a-menu>
                                        <a-menu-item>
                                            <EditOutlined @click="handleGroupSetting(group,$event)" />
                                        </a-menu-item>
                                        <a-menu-item>
                                            <DeleteOutlined @click="deleteGroup(group.id)"/>
                                        </a-menu-item>
                                    </a-menu>
                                </template>
                            </a-dropdown-button>
                        </div>
                    </template>
                </a-collapse-panel>
            </a-collapse>
            <a-empty  v-else/>
        </a-card>
        <add-flow-group
            ref="addFlowGroupRef"
            @handle-query="handleQuery"
        />
    </div> 
</template>

<script setup lang="ts" name="flowSetting">
import {onBeforeMount, onMounted, reactive, useTemplateRef} from 'vue'
import addFlowGroup from './components/addFlowGroup.vue';
import { StatusEnum } from '@/const';
import type { apiGetGroupWfFlowFormListType } from './types';
import { apiDeleteFlowGroupPost, apiGetGroupWfFlowFormList } from '@/api/flow/wfGroup';
import type { ResType } from '@/api/types';
import commonTable from '@/components/common-table/index.vue'
import { useRouter } from 'vue-router';
import { deleteGroupBackward } from '@codemirror/commands';
import { showMsg } from '@/utils';
import { deleteTestData } from '@/api/flow/flow';

defineOptions({
    name: 'flowSetting'
})

const router = useRouter()
const addFlowGroupRef = useTemplateRef('addFlowGroupRef')

const state = reactive({
    activeTab:0,
    tableData:[] as apiGetGroupWfFlowFormListType[]
})

const columns :any[]= [
    {
        title: '表单名称',
        dataIndex: 'formName',
        key: 'formName',
        align: 'center',
    }, 
    {
        title: '备注',
        dataIndex: 'memo',
        key: 'memo',
        align: 'center',
    },
    {
        title: '启用',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
    },
    {
        title:"操作",
        dataIndex:"opt",
        key:"opt",
        align:'center'
    }
]
const handleOpen = (flag:string = 'add',data?:any) => {
    addFlowGroupRef.value?.handleOpen(flag,{status:StatusEnum.ENABLE,...data})
}

const handleQuery = async ()=>{
    const res = await apiGetGroupWfFlowFormList() as ResType<apiGetGroupWfFlowFormListType[]>
    state.tableData = res.data.result
}

const handleGroupSetting = async(group:apiGetGroupWfFlowFormListType,e:Event)=>{
    e.stopPropagation()
    handleOpen("edit",group)
}

const goTocreateFlowPage = ()=>{
    router.push('/flowmanager')
}
const deleteGroup = async(id:number)=>{
    const res = await apiDeleteFlowGroupPost({id:id}) as ResType<any>
        if(res.data.code == 200){
            showMsg("删除成功",'success')
            await handleQuery()
        }else {
            showMsg("操作失败请检查",'error')
        }
}

const handleEditFormFlow = async (id:any)=>{
    router.push(`/flowmanager/${id}`)
}
const deleteFormFlow = async (id:number)=>{

}

onBeforeMount(async()=>{
    await handleQuery()
})
</script>

<style lang='scss' scoped>
.flow-setting{
    :deep(.ant-card-body){
        height: 100%;
    }
    .card-group{
        height:100%;
        overflow: hidden;
        overflow-y: auto;
        scrollbar-gutter: stable;
        &::-webkit-scrollbar {
            width: 6px;
            background: transparent;
            opacity: 0;
            transition: opacity 0.3s;
        }

        &:hover::-webkit-scrollbar {
            opacity: 1;
        }

        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-thumb,
        &::-webkit-scrollbar-track {
            border-radius: 4px;
        }

        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }

        &::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        &:hover::-webkit-scrollbar-thumb {
            background-color: #a19e9e;

            &:hover {
                background-color: #ccc;
            }
        }
    }
}
</style>